import { Button, Input, Select, Space, Table, Form, Modal, Radio, message } from 'antd';
import "./index.scss"
import React, { useState, useEffect } from 'react';
import { getFloorData, searchFloorData, deleteFloorData, changeFloorXamine, } from '../../../../utils/zscHttpMethods/httpMethod.jsx';
import { ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;
// 日期格式转换
import { parseTime } from '@/utils/date.jsx'

const FloorUnscramble = () => {
    //获取楼盘解读
    const [floorUnscramble, setFloorUnscramble] = useState("")
    //获取ID
    const [editId, setEditId] = useState(1)
    //表单
    const [form] = Form.useForm();
    //分页
    const [total, setTotal] = useState(1)
    //打开模态框
    const [open, setOpen] = useState(false);
    //表格数据
    const [data, setData] = useState([])
    // 页数
    const [currentPage, setCurrentPage] = useState(1);

    // 页面改变
    const Change = (page) => {
        setCurrentPage(page.current);
    }


    //下拉方法
    const onChange = (value) => {
    };
    const onSearch = (value) => {
    };

    //重置
    const clear = () => {
        getData();
        form.resetFields()
    }
    //删除数据
    const deleData = (id) => {
        confirm({
            title: '确定删除该信息吗?',
            icon: <ExclamationCircleFilled />,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                let params = { id }
                deleteFloorData(params).then(res => {
                    getData()
                    message.success(res.msg)
                })
            },
            onCancel() {
                message.warning('取消删除')
            },
        });
    }
    //处理数据
    const editData = (value) => {
        setOpen(true);
        setEditId(value.id)
        let content = value.unscramble;
        setFloorUnscramble(content)
    }

    //审核
    const onCreate = (values) => {
        let params = {
            id: editId,
            status: values.status
        }
        changeFloorXamine(params).then(res => {
            getData()
            message.success('审核成功')
        })
        setOpen(false);
    };
    // 渲染数据
    useEffect(() => {
        getData()
    }, [])
    //获取数据
    const getData = () => {
        getFloorData().then((res) => {
            let tableData = res.data
            setTotal(tableData.length)
            setData(
                res.data.map((item) => {
                    return {
                        key: item.id,
                        id: item.id,
                        name: item.name,
                        unscramble: item.unscramble,
                        broker: item.broker,
                        status: item.status,
                        time: item.time,
                    };
                })
            )
        })
    }
    //查询数据
    const search = (value) => {
        form.resetFields();
        searchFloorData(value).then((res) => {
            setTotal(res.data.length);
            setData(
                res.data.map((item) => {
                    return {
                        key: item.id,
                        id: item.id,
                        name: item.name,
                        unscramble: item.unscramble,
                        broker: item.broker,
                        status: item.status,
                        time: item.time,
                    };
                })
            );
        })
    }

    //表头
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            render: (text, record, index) => index + (currentPage - 1) * 5 + 1
        },
        {
            title: '楼盘解读',
            dataIndex: 'unscramble',
            key: 'unscramble',
            width: '260px',
            align: 'center',
            render: (_, { unscramble }) => {
                return <div className="ant-table3-cell">
                    {unscramble}
                </div>
            }
        },
        {
            title: '楼盘名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        },
        {
            title: '审核状态',
            key: 'status',
            dataIndex: 'status',
            align: 'center'
        },
        {
            title: '经纪人',
            key: 'broker',
            dataIndex: 'broker',
            align: 'center'
        },
        {
            title: '发布时间',
            key: 'time',
            dataIndex: 'time',
            align: 'center',
            render: (_, { time }) => {
                return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
              }
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => {
                if (record.status === '未审核') {
                    return (
                        <Space size="middle">
                            <a type="disabled"
                                onClick={() => {
                                    editData(record)
                                }}>审核</a>
                        </Space>
                    )
                } else {
                    return (
                        <a onClick={() => deleData(record.id)}>删除</a>
                    )
                }
            },
        },
    ];

    return (
        <div className='max'>
            <div className='top'>
                <div className='top-color'></div>
                <span className='top-text'>楼盘解读</span>
            </div>
            <div className='mid'>
                <Form
                    colon={false}
                    form={form}
                    onFinish={search}
                    style={{ display: 'flex' }}
                    initialValues={{
                        status: '',
                        broker: '',
                        theKey: ''
                    }}
                >
                    <Form.Item label='审核状态 ' name="status">
                        <Select
                            showSearch
                            style={{
                                width: 120,
                            }}
                            placeholder="请选择"
                            optionFilterProp="children"
                            onChange={onChange}
                            onSearch={onSearch}
                            filterOption={(input, option) =>
                                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            options={[
                                {
                                    value: '审核通过',
                                    label: '审核通过',
                                },
                                {
                                    value: '未审核',
                                    label: '未审核',
                                },
                                {
                                    value: '审核不通过',
                                    label: '审核不通过',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item className='' label="经纪人" name='broker' style={{ marginLeft: "10px" }}>
                        <Input placeholder="请输入经纪人" />
                    </Form.Item>
                    <Form.Item label="关键词" name="theKey" style={{ marginLeft: "10px" }}>
                        <Input placeholder="请输入关键词" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button type="default" onClick={() => clear()}>清空</Button>
                    </Form.Item>
                </Form>
            </div>
            <div className='bot'>
                <Table columns={columns} dataSource={data} pagination={{
                    defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
                }} rowKey={(record) => record.id} current={currentPage} onChange={Change}/>
            </div>
            <div>
                <CollectionCreateForm
                    open={open}
                    onCreate={onCreate}
                    onCancel={() => {
                        setOpen(false);
                    }}
                    floorUnscramble={floorUnscramble}
                />
            </div>
        </div>
    )
};
//审核弹框
const CollectionCreateForm = ({ open, onCreate, onCancel, floorUnscramble }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue(floorUnscramble)
    }, [floorUnscramble])
    return (
        <Modal
            open={open}
            title="审核经纪人点评"
            okText="确定"
            cancelText="取消"
            onCancel={onCancel}
            forceRender
            onOk={() => {
                form
                    .validateFields()
                    .then((values) => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch((info) => {
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    status: '通过',
                }}
            >
                <Form.Item name="content" label="内容">
                    <span>{floorUnscramble}</span>
                </Form.Item>
                <Form.Item name="status" className="collection-create-form_last-form-item" label="审核">
                    <Radio.Group>
                        <Radio value="审核通过">审核通过</Radio>
                        <Radio value="审核不通过">审核不通过</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Modal>
    );
}
export default FloorUnscramble;